<html>
<head>
    {% include 'common/top.html' %}
    <script src="static/js/jPages.js"></script>

    <script>
    $(function () {
        $("div.holder").jPages({
        containerID: "itemContainer",
        perPage: 5
      });
      $("#myCarousel").carousel({
	      interval: 5000
        });
        $("#news").carousel({
	      interval: 5000
        });
        });

    </script>
    <style type="text/css">
        body{background:#d6d6d6;}
        h3 {
        color:#1BA2E1
        }
        .holder {
        margin: 15px 0;
        }

        .holder a {
        font-size: 12px;
        cursor: pointer;
        margin: 0 5px;
        color: #333;
        }

        .holder a:hover {
        background-color: #222;
        color: #fff;
        }

        .holder a.jp-previous {
        margin-right: 15px;
        }

        .holder a.jp-next {
        margin-left: 15px;
        }

        .holder a.jp-current,
        a.jp-current:hover {
        color: #FF4242;
        font-weight: bold;
        }

        .holder a.jp-disabled,
        a.jp-disabled:hover {
        color: #bbb;
        }

        .holder a.jp-current,
        a.jp-current:hover,
        .holder a.jp-disabled,
        a.jp-disabled:hover {
        cursor: default;
        background: none;
        }

        .holder span {
        margin: 0 5px;
        }
        }
    </style>
</head>
<body style="background:#D6D6D6">
<div class="login_wrapper">
    {% include 'common/home_header.html' %}
    <div id="slide" class="col-xs-12">
        <div id="myCarousel" class="carousel slide">
            <!-- 轮播（Carousel）项目 -->
            <div class="carousel-inner">
                {% for banner in banner_list %}
                {% if loop.index == 1 %}
                <div class="item active ">
                    {% else %}
                    <div class="item">
                        {% endif %}
                        <a href={{banner.url}}><img style="height:80%;width:100%" src={{banner.img}}>
                        </a>
                    </div>
                    {% endfor %}
                </div>
                <!--轮播（Carousel）导航 -->
                <a class="carousel-control left" href="#myCarousel"
                   data-slide="prev">
                </a>
                <a class="carousel-control right" href="#myCarousel"
                   data-slide="next">
                </a>
            </div>
        </div>
        <!--快速导航-->
        <div id="fast_nav">
            <div class="col-xs-10" style="margin-top:-110px;margin-left:100px;margin-right:80px;">
                <div class="col-xs-2">
                    <a href="service_time"><img
                            src="http://maislook.oss-cn-shanghai.aliyuncs.com/quick_nav_time.png"></a>
                </div>
                <div class="col-xs-2">
                    <a href="medical_info_list"><img
                            src="http://maislook.oss-cn-shanghai.aliyuncs.com/quick_nav_notice.png"></a>
                </div>
                <div class="col-xs-2">
                    <a href="special_list"><img
                            src="http://maislook.oss-cn-shanghai.aliyuncs.com/quick_nav_special.png"></a>
                </div>
                <div class="col-xs-2">
                    <a href="service_pre"><img
                            src="http://maislook.oss-cn-shanghai.aliyuncs.com/quick_nav_pre.png"></a>
                </div>
                <div class="col-xs-2">
                    <a href="location"><img
                            src="http://maislook.oss-cn-shanghai.aliyuncs.com/quick_nav_loc.png"></a>
                </div>
                <div class="col-xs-2">
                    <a href="health_care_guide_list"><img
                            src="http://maislook.oss-cn-shanghai.aliyuncs.com/quick_nav_ensurance.png"></a>
                </div>
            </div>
        </div>
        <!--新闻模块-->
        <div class="col-xs-8" style="margin-top:25px">
            <!--新闻区块-->
            <div class="col-xs-12" style="margin:0px 0px 25px 0px;background:white;">
                <!--新闻图片-->
                <div id="news_slide" class="col-xs-6" style="margin:25px 0px 10px 0px;background:white">
                    <div id="news" class="carousel slide">
                        <!-- 轮播（Carousel）指标 -->
                        <ol class="carousel-indicators">
                            <li data-target="#news" data-slide-to="0" class="active"></li>
                            <li data-target="#news" data-slide-to="1"></li>
                            <li data-target="#news" data-slide-to="2"></li>
                        </ol>

                        <!-- 轮播（Carousel）项目 -->
                        <div class="carousel-inner">
                            {% for news in break_news_list %}
                            {% if loop.index == 1 %}
                            <div class="item active ">
                                {% else %}
                                <div class="item">
                                    {% endif %}
                                    <a href={{news.url}}><img style="height:250px;width:100%"
                                                              src={{news.cover}}></a>
                                    <div class="description" align="center">{{news.title}}</div>
                                </div>
                                {% endfor %}
                            </div>
                            <!--轮播（Carousel）导航 -->
                            <a class="carousel-control left" href="#news"
                               data-slide="prev">
                            </a>
                            <a class="carousel-control right" href="#news"
                               data-slide="next">
                            </a>
                        </div>
                    </div>
                    <!--新闻集合-->
                    <div id="news_content" class="col-xs-6" style="margin:5px 0px 10px 0px;background:white">
                        <h3>重大新闻</h3>
                        {% for news in break_news_list %}
                        <li style="margin-bottom:10px;border-bottom:1px dashed #D6D6D6;"><a
                                href={{news.url}}
                                style="color:black;font-size:15px">{{news.title}}</a>
                        </li>
                        {% endfor %}
                        <a href="news_set"><p style="font-size:15px">查看更多>>></p></a>
                    </div>
                </div>
                <!--科室设置模块-->
                <div class="col-xs-12" style="margin-top:0px;background:white">
                    <h3 style="text-align:center">科室设置</h3>
                    <div>
                        <div class="col-md-12" style="background:#D6D6D6;margin-bottom:5px">
                            <h4 style="margin-top:5px;margin-bottom:5px">手术科室</h4>
                        </div>
                        {% for department in departments1 %}
                        <div class="col-md-3">
                            <a href={{department.url}}><p style="color:black">{{department.name}}</p></a>
                        </div>
                        {% endfor %}
                    </div>
                    <div>
                        <div class="col-md-12" style="background:#DEDEDE;margin-bottom:5px">
                            <h4 style="margin-top:5px;margin-bottom:5px">非手术科室</h4>
                        </div>
                        {% for department in departments2 %}
                        <div class="col-md-3">
                            <a href={{department.url}}><p style="color:black">{{department.name}}</p></a>
                        </div>
                        {% endfor %}
                    </div>
                </div>

                <!--专题专栏-->
                <div class="col-xs-12" style="margin-top:25px;margin-bottom:25px;background:white">
                    <h3 style="text-align:center">专题专栏</h3>
                    <div class="col-xs-4" style="margin:5px 0 10px">
                        <div class="col-xs-12">
                            <a href="column"><img style="width:100%;height:150px"
                                                  src="http://maislook.oss-cn-shanghai.aliyuncs.com/column/1.jpg"></a>
                        </div>
                        <div class="col-xs-12">
                            <p style="text-align:center">二甲复评</p>
                        </div>
                    </div>
                    <div class="col-xs-4" style="margin:5px 0 10px">
                        <div class="col-xs-12">
                            <a href="column"><img style="width:100%;height:150px;"
                                                  src="http://maislook.oss-cn-shanghai.aliyuncs.com/column/2.jpg"></a>
                        </div>
                        <div class="col-xs-12">
                            <p style="text-align:center">交流合作</p>
                        </div>
                    </div>
                    <div class="col-xs-4" style="margin:5px 0 10px">
                        <div class="col-xs-12">
                            <a href="column"><img style="width:100%;height:150px;"
                                                  src="http://maislook.oss-cn-shanghai.aliyuncs.com/column/3.jpg"></a>
                        </div>
                        <div class="col-xs-12">
                            <p style="text-align:center">两学一做</p>
                        </div>
                    </div>
                </div>
            </div>
            <!--医生模块-->
            <div id="doctor_list" class="col-xs-4" style="margin:25px 0px auto;background:white">
                <h3 style="text-align:center">专家介绍</h3>
                <div id="itemContainer">
                    {% for doctor in doctors %}
                    <div class="col-xs-12" style="margin-left:-15px;margin-bottom:20px;background:white;">
                        <div class="col-xs-4" style="margin-left:0px;background:white">
                            <a href={{doctor.url}}><img style="width:100%" src={{doctor.logo}}></a>
                        </div>
                        <div class="col-xs-6 col-xs-offset-1"
                             style="margin-top:15px;background:#D6D6D6">
                            <p style="margin-top:10px;font-size:20px" align="center">{{doctor.name}}</p>
                            <p style="font-size:17px" align="left">科室：{{doctor.department}}</p>
                            <p style="font-size:17px" align="left">职称：{{doctor.title}}</p>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                <div class="holder">
                </div>
            </div>
        </div>
    </div>
    {% include 'common/foot.html' %}
</div>
</body>

